<template>
	<view>
		<u-mask :show="show" :mask-click-able="false" :custom-style="{background: 'rgba(0, 0, 0, 0.8)'}">

			<view class="pay-modal">
				<view class="pay-video">

					<u-image v-if="face" width="100%" height="420rpx" :src="face"></u-image>

<!--					<video :poster="poster" class="video" preload="auto">-->
<!--						<source src="" type="application/x-mpegURL">-->
<!--					</video>-->

                    <u-button v-if="storeData.user_day_text == 1"
							  @click="videoShow(1, 2)"
							  size="medium"
							  class="free"
					>免费观看</u-button>
				</view>
				
				<view style="color:#ffffff;font-size:16px;">{{ $help.xor_enc(storeData.title) }}</view>
				
				<view v-if="storeData.user_day_text != 1" class="pay">
					<view class="pay-line pay-one">
						<view class="pay-btn" @click="videoShow(1, 1)">
							<!-- <view class="pay-img">
								<u-image class="img" :src="imgList.wx"></u-image>
							</view> -->
							<view class="pay-text" style="font-size:22px;">微信 ￥{{ storeData.price }} 单片</view>
						</view>

						<!-- <view class="pay-btn" @click="videoShow(1, 2)">
							<view class="pay-img">
								<u-image class="img" :src="imgList.ali"></u-image>
							</view>
							<view class="pay-text">支付宝 ￥{{ storeData.price }} 单片</view>
						</view> -->
					</view>

					<view v-if="storeData.price_day >= 30" class="pay-line pay-two">
						<view class="pay-btn" @click="videoShow(2, 1)">
							<!-- <view class="pay-img">
								<u-image class="img" :src="imgList.wx"></u-image>
							</view> -->
							<view class="pay-text text-red" style="font-size:22px;">微信 ￥{{ storeData.price_day }} 包天</view>
						</view>

						<!-- <view class="pay-btn" @click="videoShow(2, 2)">
							<view class="pay-img">
								<u-image class="img" :src="imgList.ali"></u-image>
							</view>
							<view class="pay-text text-red">支付宝 ￥{{ storeData.price_day }} 包天</view>
						</view> -->
					</view>

					<u-button @click="closePay()" size="medium" class="close-btn">取消支付</u-button>
				</view>
			</view>

		</u-mask>
	</view>

</template>

<script>
	import {
		BASE_COVER
	} from "../env";

	export default {
		// extends:helper,
		name: "Nav",
		data() {
			return {
				show: false,
				showUrl: '',
				code: '',
				video_id: '',
				face: null, // 视频图片
				
				ispay:0,

				poster: BASE_COVER,
				imgList: {
					wx: 'http://vv2.5gs.cc/images/wxpay.png',
					ali: 'http://vv2.5gs.cc/images/alipay.png'
				},
				storeData: {
					title: '',
					user_day_text: 1,
					price: 0.01,
					price_day: 30,
				}

			}
		},

		created() {
			this.$bus.$on('videoItem', data => {

				this.videoItem(data.buyed, data.video);
				console.log('收到',data)
			})
        },


		mounted: function() {

		},
		methods: {
			// 模态框弹起准备
			videoItem(buyed, video) {

				this.face = video.face_img;

				this.code = uni.getStorageSync('homeStore').code;
				this.video_id = video.id;
				
				this.storeData.title = video.c_title;
				this.storeData.price = video.price;
				this.storeData.price_day = video.price_day;

				// 已支付
				let code = uni.getStorageSync('homeStore').code;
				let url = `pay?code=${code}&video_id=${video.id}`;
				if (buyed) {
					// 已支付
					this.storeData.user_day_text = 1;

				} else {
					// 未支付
					this.storeData.user_day_text = 0;
				}
				this.show = true;
			},

			// 观看
			videoShow(type, payType) {
				//获取支付信息
				this.$api.getPayinfo({video_id: this.video_id, code: this.code}).then((res) => {
					if(res.code == 0){
						this.ispay = 0;	window.location.href = res.data;
					}else{
						this.ispay = 1;
					}
				});
				
				// this.$parent.jumpDetail(type, payType, this.video_id, this.code);
				if(this.ispay == 0)return;
				console.log('code', this.code)
				this.$u.route({
					url: 'pages/index/detail',
					params: {
						price_type: type,
						pay_type: payType,
						video_id: this.video_id,
						code: this.code,
					}
				})
				this.show = false;
			},

			// 关闭模态框
			closePay() {
				this.show = false;
			},
            // 配置属性
            setStoreData(value = {}) {
                Object.assign(this.storeData, value);
            }
		}
	}
</script>

<style lang="scss" scoped>
	.pay-modal {
		width: 80%;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		text-align: center;
		height: 100vh;

		.pay-video {
			margin-top: -10%;
		}

		.pay {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 30%;
			margin-top: -10%;

			.pay-line {
				// display: flex;
				justify-content: space-evenly;

				.pay-btn {
					background: white;
					border-radius: 40rpx;
					height: 150rpx;
					width: 100%;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: inherit;

					.pay-img {
						display: flex;
						justify-content: center;

						.img {
							width: 70% !important;
							height: 60rpx !important;
						}
					}

					.pay-text {
						font-weight: 600;
						font-size: 24rpx;
					}

					.text-red {
						color: red;
					}
				}

			}

			.close-btn {
				background: #ccc;
				color: white;
				font-weight: 600;
				font-size: 32rpx;
				width: 66%;
			}
		}

		.free {
			background: linear-gradient(to right, Yellow, red);
			font-size: 42rpx;
			font-weight: bold;
			border: none;
			border-radius: 30rpx;
			width: 95%;
		}
	}
</style>
